<link rel="stylesheet" type="text/css" href="/assets/third-party/datatables/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="/assets/css/dataTables.bootstrap.css">
<link href="/assets/third-party/iCheck-master/skins/square/green.css" rel="stylesheet">

<style type="text/css">
	.il{
		display: inline;
	}
	.form-group .control-label{
		padding-right: 5px;
	}
	.form-group .col-sm-7{
		padding-left: 5px;
	}
	.form-group input, .form-group select{
		width: 89%;
		display: inline;
	}
</style>

<div class="container" style="margin-top: 60px;">
	<div class="row">
		<div class="col-lg-12">
			<select id="grade" class="form-control" style="display: inline; width: 120px;">
				<option value="">所有课程</option>
				<?php foreach ($grades as $key => $value) { ?>
				<option value="<?php echo $value->name; ?>"><?php echo $value->name; ?></option>
				<?php } ?>
			</select>
			<!--<a href="#" class="btn btn-info"> <i class="fa fa-search"></i> 查询 </a> -->
			<a href="#" class="btn btn-info" data-toggle="modal" data-target="#gradeModal"> <i class="fa fa-plus"></i> 年级设置 </a>
			<a href="#" class="btn btn-success" data-toggle="modal" data-target="#courseModal"> <i class="fa fa-plus"></i> 新增课程 </a>
			<!--<a href="#" class="btn btn-success"> <i class="fa fa-plus"></i> 全选 </a>
			<a href="#" class="btn btn-danger"> <i class="fa fa-plus"></i> 批量删除 </a>
			<a href="#" class="btn btn-danger"> <i class="fa fa-plus"></i> 刷新 </a>-->
		</div>
	</div>
	<div class="row" style="margin-top: 10px;">
		<div class="col-lg-12">
			<div class="panel panel-default">
                <div class="panel-heading">
                    课程列表
                </div>
                <!-- /.panel-heading -->
                <div class="panel-body">
					<table class="table table-bordered table-hover" id="tableCourse">
						<thead>
							<tr>
								<th>ID</th>
								<th>缩略图</th>
								<th>课程名</th>
								<th>年级</th>
								<th>上课时间</th>
								<th>费用</th>
								<th>教室</th>
								<th>学期</th>
								<th>创建时间</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="courseList">
							<?php foreach ($items as $key => $value) { ?>
							<tr data-id="<?php echo $value->id; ?>">
								<td><?php echo $value->id; ?></td>
								<td><img src="<?php echo $value->thumbnail; ?>" alt="缩略图" style="width: 80px;";/></td>
								<td><?php echo $value->name; ?></td>
								<td><?php echo $value->grade->name; ?></td>
								<td><?php echo "{$value->date} {$value->start_time}至{$value->end_time}"; ?></td>
								<td>￥<?php echo $value->price; ?></td>
								<td><?php echo $value->classroom; ?></td>
								<td><?php echo $value->term->name; ?></td>
								<td><?php echo date('Y-m-d H:i:s', $value->created_at); ?></td>
								<td>
									<a href="#" class="btn btn-sm btn-info" data-toggle="modal" data-target="#courseModal" role="edit"> <i class="fa fa-pencil-square-o"></i> 编辑 </a>
									<a href="#" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#confirmModal" type="course"> <i class="fa fa-trash-o"></i> 删除 </a>
								</td>
							</tr>
							<?php } ?>							
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- 年级管理模态框 -->
<div class="modal fade" id="gradeModal" tabindex="-1" role="dialog" aria-labelledby="gradeModalTitle" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title" id="gradeModalTitle">年级设置</h4>
			</div>
			<div class="modal-body">
				<a href="#" class="btn btn-success" id="btnAddLevel"> <i class="fa fa-plus"></i> 新增年级 </a>
				<table class="table table-bordered table-hover" style="margin-top: 10px;">
					<thead>
						<tr>
							<th>ID</th>
							<th>年级名称</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="gradeList">
						<?php foreach ($grades as $grade) { ?>
						<tr data-id="<?php echo $grade->id; ?>">
							<td><?php echo $grade->id; ?></td>
							<td><span><?php echo $grade->name; ?></span><input class="hide" type="text" value="<?php echo $grade->name; ?>" style="width: 70px;"/></td>
							<td>
								<a role="save" class="btn btn-sm btn-success hide"> <i class="fa fa-check"></i> 保存 </a>
								<a role="edit" class="btn btn-sm btn-info"> <i class="fa fa-pencil-square-o"></i> 编辑 </a>
								<a role="del" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#confirmModal" type="grade"> <i class="fa fa-trash-o"></i> 删除 </a>
							</td>
						</tr>
						<?php } ?>							
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>

<!-- 课程详情模态框 -->
<div class="modal fade" id="courseModal" tabindex="-1" role="dialog" aria-labelledby="courseModalTitle" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title" id="courseModalTitle"> 课程资料 </h4>
			</div>
			<div class="modal-body">
				<form id="frmCourse" role="form" action="" method="post" data-parsley-validate>
					<div class="form-group">
						<label for="name">课程名称</label>
						<input type="text" class="form-control" id="name" name="name" placeholder="课程名称" required>
					</div>
					<div class="form-group">
						<label for="btnUpload">课程图片</label>
						<img src="" id="viewThumbnail" alt="" style="width: 80px;"/>
						<input type="hidden" id="thumbnail" name="thumbnail" />
						<a id="btnUpload" class="btn btn-info" data-panel='thumbnail' data-toggle="modal" data-target="#modal-upload">上传</a>
					</div>
					<div class="form-group">
						<label for="grade_id">所属年级</label>
						<select id="grade_id" name="grade_id" class="form-control" required>
							<?php foreach ($grades as $key => $value) { ?>
							<option value="<?php echo $value->id; ?>"><?php echo $value->name; ?></option>
							<?php } ?>
						</select>
					</div>
					<div class="form-group">
						<label for="date">上课时间</label>
						<input type="text" class="form-control" id="date" name="date" placeholder="如：周日" style="width: 29%; display:inline;" required data-parsley-errors-container="#start_help_block">
						<input type="text" class="form-control" id="start_time" name="start_time" placeholder="开始时间" style="width: 29%; display:inline;" required data-parsley-errors-container="#start_help_block">
						<input type="text" class="form-control" id="end_time" name="end_time" placeholder="结束时间" style="width: 29%; display:inline;" required data-parsley-errors-container="#start_help_block">
						<p id="start_help_block" class="help-block"></p>
					</div>
					<div class="form-group">
						<label for="classroom">排 &nbsp;序&nbsp; 值</label>
						<input type="number" class="form-control" id="sort" name="sort" placeholder="排序值，越小越靠前，建议取值1-255" style="width: 30%; display:inline;" required>
					</div>
					<div class="form-group">
						<label for="price">课程费用</label>
						<input type="number" class="form-control" id="price" name="price" placeholder="该课程费用" style="width: 30%; display:inline;" required data-parsley-errors-container="#price_help_block">
						<input type="checkbox" id="is_discount" name="is_discount" value="1" data-parsley-ui-enabled="false" style="width:auto; display:inline;"/> <label for="is_discount">参与折扣</label>
						<p id="price_help_block" class="help-block"></p>
					</div>
					<div class="form-group">
						<label for="classroom">上课教室</label>
						<input type="text" class="form-control" id="classroom" name="classroom" placeholder="教室" required>
					</div>
					<div class="form-group">
						<label for="term_id">所属学期</label>
						<select id="term_id" name="term_id" class="form-control" required>
							<?php if($terms){ ?>
								<?php foreach ($terms as $key => $value) { ?>
								<option value="<?php echo $value->id; ?>"><?php echo $value->name; ?></option>
								<?php } ?>
							<?php }else{ ?>
								<option value="">未设置</option>
							<?php } ?>
							
						</select>
					</div>
					<div class="form-group">
						<label for="body">课程简介</label>
						<textarea class="form-control" id="body" name="body" style="width: 100%;"></textarea>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal"> 取消 </button>
				<button type="button" id="btnSave" class="btn btn-primary"> 保存 </button>
			</div>
		</div>
	</div>
</div>

<!-- 确认删除模态框 -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalTitle" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body">
				<div class="alert alert-warning">
					<strong>确定删除？</strong>
					<p id="help-block"></p>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal"> 取消 </button>
				<button type="button" id="btnConfirm" data-url="" class="btn btn-danger"> 确定 </button>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript" src="/assets/third-party/editor/kindeditor-min.js"></script>
<script type="text/javascript" src="/assets/third-party/editor//lang/zh_CN.js"></script>
<script type="text/javascript">
    var editor;
    KindEditor.ready(function(K) {
        editor = K.create('#body', {
            allowFileManager : false
        });
    });
</script>

<script type="text/javascript" src="/assets/third-party/jquery-tmpl-master/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="/assets/third-party/jquery-tmpl-master/jquery.tmplPlus.min.js"></script>
<script type="text/x-jquery-tmpl" id="tr">
<tr>
	<td>${id}</td>
	<td><span class="hide">${name}</span><input type="text" value="${name}" placeholder="级别名称"  style="width: 70px;"/></td>
	<td>
		<a role="save" class="btn btn-sm btn-success"> <i class="fa fa-check"></i> 保存 </a>
		<a role="edit" class="btn btn-sm btn-info hide"> <i class="fa fa-pencil-square-o"></i> 编辑 </a>
		<a role="del" class="btn btn-sm btn-danger hide" type="grade"> <i class="fa fa-trash-o"></i> 删除 </a>
	</td>
</tr>
</script>

<script type="text/javascript" src="/assets/js/tools.js"></script>
<script type="text/javascript" src="/assets/third-party/datatables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/assets/js/dataTables.bootstrap.js"></script>
<script type="text/javascript">
	var flag = false;

	$(function(){

		$('.panel-body .table').dataTable({
	        "oLanguage": {
	            "sLengthMenu": "每页显示 _MENU_ 条记录",
	            "sZeroRecords": "很抱歉，未找到相关数据",
	            "sInfo": "从 _START_ 至 _END_ /共 _TOTAL_ 条数据",
	            "sInfoEmpty": "没有符合条件的数据",
	            "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
	            "sSearch": "搜索：",
	            "oPaginate": {  
					"sFirst": "首页",  
					"sPrevious": "上一页",
					"sNext": "下一页",
					"sLast": "末页"
				}  
	        },
	        fnDrawCallback: function(){

	            if(window.flag == false){
	        		window.flag = true;
	        		var index = localStorage.getItem('pagination_index');
	                localStorage.removeItem('pagination_index');
		        	if( ! index){
		        		index = 1;
		        	}
		        	index -= 1;

		        	$('#tableCourse').dataTable().fnPageChange(index);
	                
	        	}
            }
	    });

		$(document).delegate('a[data-target="#courseModal"]', 'click', function(){

			localStorage.setItem('pagination_index', $('.pagination .active').find('a').text());

	    	$('#name').val('');
	    	$('#grade_id').val('');
	    	$('#start_time').val('');
	    	$('#end_time').val('');
	    	$('#price').val('');
	    	$('#body').val("");
	    	$('#classroom').val('');
	    	$('#date').val('');
	    	$('#sort').val('');

	    	if($(this).attr('role') == 'edit'){
	    		$('#frmCourse').attr('action', '/admin/course/edit/' + $(this).parent().parent().attr('data-id'));
	    		$.get('/admin/course/view/' + $(this).parent().parent().attr('data-id'), 
	    			function(data, status){
	    				if(data.status == 'succ'){
	    					var item = data.data;
	    					$('#name').val(item.name);
	    					$('#grade_id').val(item.grade_id);
	    					$('#start_time').val(item.start_time);
	    					$('#end_time').val(item.end_time);
	    					$('#price').val(item.price);
	    					editor.html(item.body, 'body');
	    					$('#body').val(item.body);
	    					$('#term_id').val(item.term_id);
	    					$('#classroom').val(item.classroom);
	    					$('#date').val(item.date);
	    					$('#viewThumbnail').attr("src", item.thumbnail);
	    					$('#thumbnail').val(item.thumbnail);	    					
	    					$('#sort').val(item.sort);
	    					if(item.is_discount == 1){
	    						$('#is_discount').iCheck('check');
	    					}	    					
	    				}
	    			}, 'json');
	    	}else{
	    		$('#frmCourse').attr('action', '/admin/course/create/');
	    	}
	    });

		$('#courseList').delegate('a[data-target="#confirmModal"]', 'click', function(){
	    	$('#btnConfirm').attr('data-id', $(this).parent().parent().attr('data-id'));
	    	$('#btnConfirm').attr('data-url', $(this).attr('type'));
	    	if($(this).attr('type') == 'course'){
	    		$('#help-block').text('删除该学习记录，学生及家长将无法查看该记录!');
	    	}else if($(this).attr('type') == 'grade'){
	    		$('#help-block').text('删除该班级，该班级下的学生将被一起删除!');
	    	}
	    });

	    $('#btnConfirm').click(function(){
	    	var id = $(this).attr('data-id');
	    	var url = $(this).attr('data-url');
	    	var list;

	    	if(url == 'course'){
	    		url = "/admin/course/delete/" + id;
	    		list = "#courseList";
	    	}else if(url == 'grade'){
	    		url = "/admin/grade/delete/" + id;
	    		list = "#gradeList";
	    	}
	    	$.get(url,
	    		function(data, status){
	    			if(data.status == 'succ'){
	    				$(list).find('tr[data-id="' + id + '"]').remove();
	    				$('#confirmModal').modal('hide');
	    			}
	    		}, 'json');
	    });

	    $('#grade').change(function(){
	    	$('input[type="search"]').val($(this).val()).keyup();
	    });

	    $('#gradeList').delegate('a', 'click', function(){
	    	var obj = $(this);

	    	if(obj.attr('role') == 'save'){
	    		obj.addClass('hide');
	    		obj.next().removeClass('hide');
	    		obj.next().next().removeClass('hide');
	    		obj.parent().parent().find('span').text(obj.parent().parent().find('input').val());
	    		obj.parent().parent().find('input').addClass('hide');
	    		obj.parent().parent().find('span').removeClass('hide');

	    		if(obj.parent().parent().attr('data-id') == undefined || obj.parent().parent().attr('data-id') == ''){
	    			$.post('/admin/grade/create/' + obj.parent().parent().attr('data-id'), 
	    				{
	    					'name' : obj.parent().parent().find('input').val()
	    				}, 
	    				function(data, status){
	    					if(data.status == 'succ'){
	    						obj.parent().parent().attr('data-id', data.data.id);
	    					}
	    				}, 'json');
	    		}else{
	    			$.post('/admin/grade/edit/' + obj.parent().parent().attr('data-id'), 
	    				{
	    					'name' : obj.parent().parent().find('input').val()
	    				}, 
	    				function(data, status){
	    					if(data.status == 'succ'){
	    					}
	    				}, 'json');
	    		}
	    	}else if(obj.attr('role') == 'edit'){
	    		obj.addClass('hide');
	    		obj.next().addClass('hide');
	    		obj.prev().removeClass('hide');
	    		obj.parent().parent().find('input').val(obj.parent().parent().find('span').text());
	    		obj.parent().parent().find('input').removeClass('hide');
	    		obj.parent().parent().find('span').addClass('hide');
	    	}else if(obj.attr('role') == 'del'){

	    	}
	    });


	});
</script>

<script type="text/javascript" src="/assets/third-party/parsley/parsley.min.js"></script>
<script type="text/javascript" src="/assets/third-party/parsley/i18n/zh_cn.js"></script>
<script type="text/javascript" src="/assets/third-party/parsley/i18n/zh_cn.extra.js"></script>
<script type="text/javascript">
	$(function(){
		$('#btnSave').click(function(){
			editor.sync();
			$('#frmCourse').submit();
		});
	});
</script>

<?php echo render('edu/public/upload'); ?>
<script type="text/javascript">
    var path = 'images';
    var imgpanel = '';


    function callback(file, data){
        var json = eval('(' + data + ')');
        if(json.status == 'succ'){
            $("#thumbnail").val(json.data);
            document.getElementById("viewThumbnail").src=json.data;
        }else{
            alert(json.msg);
        }
    }
</script>

<script type="text/javascript" src="/assets/third-party/iCheck-master/icheck.min.js"></script>
<script type="text/javascript">
$(function(){

	$('input[type="checkbox"]').iCheck({
        checkboxClass: 'icheckbox_square-green',
        radioClass: 'iradio_square-green',
        increaseArea: '20%' // optional
    });
});
</script>
